import React, { useState, useEffect } from "react";
import InterTime from "@/components/InterTime";
import Tabs from '@/components/Tabs'
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { fetchUserOrder } from '@/server/order';
import { backgroundObj, loginData } from '@/utils/utils'
import Router from '@/utils/router';
import "./index.scss";

export default (props) => {
  const { params } = getCurrentInstance().router
  const { status = '' } = params
  const { organizationId = '1' } = loginData() || {}
  const [data, setData] = useState([])
  const [page, setPage] = useState({
    page: 1,
    limit: 10
  })

  useEffect(() => {
    fetchData()
  }, [page])
  useReachBottom(() => {
    setPage({
      ...page,
      page: page.page + 1
    })
  })
  const [activeKey, setActiveKey] = useState(status)
  const [tabs, setTabs] = useState([{
    label: '全部',
    value: ''
  }, {
    label: '待付款',
    value: '0'
  }, {
    label: '已付款',
    value: '1'
  }, {
    label: '已关闭',
    value: '2'
  }, {
    label: '已完成',
    value: '3'
  }])
  const OrderCard = (props) => {
    const { data } = props
    const { beanFee,
      createTime,
      orderDesc,
      orderSn,
      payFee = 0,
      totalFee,
      refusedFlag,
      goodsAmount,
      payMode,
      status } = data
    let desc = JSON.parse(orderDesc) || [];
    const renderRightTitle = {
      0: <View className="orderList_list_status1">待付款</View>,
      1: <View className="orderList_list_status2">已支付</View>,
      2: (
        <View className="orderList_list_status2">
          {refusedFlag === "1" ? "已退款" : "交易关闭"}
        </View>
      ),
      3: (
        <View className="orderList_list_status2">
          已完成
        </View>
      ),
    }[status];
    const { goodsName, goodsCover } = desc
    const renderBottom = {
      0: (
        <>
          <View className="orderList_data_btn">
            <View className="orderList_pay_box">
              <View className="orderList_pay_label">需付款:</View>
              <View className="orderList_pay_icon">¥</View>
              <View className="orderList_pay_price">{payFee}</View>
            </View>
          </View>
          <View className="orderList_pay_btnBox">
            <View className="orderList_pay_btntime">
              剩余
              <InterTime
                fn={() => updateStatus(item)}
                times={createTime}
              ></InterTime>
              自动关闭
            </View>
            <View className="orderList_pay_btnSubmit">付款</View>
          </View>
        </>
      ),
      1: (
        <View className="orderList_data_btn">
          <View className="orderList_pay_box">
            <View className="orderList_pay_label">实付:</View>
            <View className="orderList_pay_icon">¥</View>
            <View className="orderList_pay_price">{payFee}</View>
          </View>
        </View>
      ),
      2: (
        <View className="orderList_pay_tk">
          {refusedFlag === "1" ? (
            <View className="orderList_pay_btntime">已退款</View>
          ) : (
            <View className=""></View>
          )}
          <View className="orderList_data_btn" style={{ border: "none" }}>
            <View className="orderList_pay_box">
              <View className="orderList_pay_label">实付:</View>
              <View className="orderList_pay_icon">¥</View>
              <View className="orderList_pay_price">
                {refusedFlag === "1" ? payFee : "0"}
              </View>
            </View>
          </View>
        </View>
      ),
      3: (
        <View className="orderList_data_btn">
          <View className="orderList_pay_box">
            <View className="orderList_pay_label">实付:</View>
            <View className="orderList_pay_icon">¥</View>
            <View className="orderList_pay_price">{payMode === 'free' ? '0' : payFee}</View>
          </View>
        </View>
      )
    }[status];
    return (
      <View
        className="orderList_data_list"
        onClick={(e) => {
          e.stopPropagation();
          Router('orderDetail', { args: { orderSn } })
        }}
      >
        <View className="orderList_list_title">
          <View className="orderList_list_time">{createTime}</View>
          {renderRightTitle}
        </View>
        <View className="orderList_data_content">
          <View className="orderList_data_body">
            <View style={backgroundObj(goodsCover)} className="orderList_listData_profile">

            </View>
            <View className="orderList_listData_body">
              <View className="orderList_listData_title">
                {goodsName}
              </View>
              <View className="orderList_listData_priceOrCount">
                <View className="orderList_list_price">
                  ¥{payFee}
                </View>
                <View className="orderList_list_count">x {goodsAmount}</View>
              </View>
            </View>
          </View>
        </View>
        {renderBottom}
      </View>
    );
  }
  const updateStatus = (item) => {
    setList(list.map(data => {
      if (item.orderSn === data.orderSn) {
        return {
          ...data, status: '2'
        }
      } else {
        return data
      }
    }))
  }
  const fetchData = () => {
    fetchUserOrder({ organizationId, ...page, status: activeKey }).then(val => {
      const { orderList } = val
      setData([...data, ...orderList])
    })
  }
  return (
    <View className="orderList_box">
      <Tabs list={tabs} onChange={(e) => {
        setActiveKey(() => {
          setPage(() => {
            setData([])
            return {
              ...page,
              page: 1
            }
          })
          return e
        })
      }} activeKey={activeKey}>
      </Tabs>
      <View className="orderList_data">
        {data.map((item, index) => {
          return <OrderCard key={index} data={item}></OrderCard>
        })}
      </View>
    </View>
  );
};

